<template>
  <div class="newMusic">
    <div class="title">
      <h3>最新音乐</h3>
      <a @click="toNewSongPage">更多></a>
    </div>
    <div class="newSongList">
      <div class="li" v-for="(item, index) in newSonglist" :key="index" @click="playSong(item.id, index)">
        <span class="index">{{ ++index &lt; 10 ? '0' + index : index }}</span>
        <div class="img">
          <img :src="item.picUrl" />
          <i class="iconfont icon-playcircle"></i>
        </div>
        <div class="name">
          <span>{{ item.name }}</span>
          <span>{{ item.song.artists[0].name }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getNewSong } from '../../../network/playlist.js'
import { getMusicUrl, getMusicMenu } from '../../../network/swiper.js'
export default {
  data () {
    return {
      newSonglist: [],
      musiclistIds: []
    }
  },
  methods: {
    getNewSong () {
      getNewSong().then(res => {
        // console.log(res.data)
        this.newSonglist = res.data.result
        this.newSonglist.forEach(item => {
          this.musiclistIds.push(item.id)
        })
        // console.log(this.newSonglist)
      })
    },
    playSong (id, index) {
      if (id === null) return
      this.getMusicUrl(id)
      this.getMusicMenu(id)
      this.$store.commit('musicListIds', this.musiclistIds)
      this.$store.commit('musicIndex', index - 1)
      this.$store.commit('setMusicCount', this.musiclistIds.length)
    },
    getMusicUrl (id) {
      getMusicUrl(id).then(res => {
        // console.log(res.data.data[0].url)
        if (res.data.data[0].url === null) {
          return this.$message.error('获取资源失败！')
        }
        this.musicUrl = res.data.data[0].url
        this.$store.commit('getNowMusic', this.musicUrl)
      })
    },
    getMusicMenu (id) {
      getMusicMenu(id).then(res => {
        // console.log(res.data)
        this.musicMenu = res.data.songs[0]
        this.$store.commit('getnowMusicMenu', this.musicMenu)
      })
    },
    toNewSongPage () {
      this.$router.push('/find_music/rtnewsing')
    }
  },
  created () {
    this.getNewSong()
  }
}
</script>

<style lang="less" scoped>
  .newMusic {
    width: 90%;
    margin: 50px auto;
    box-sizing: border-box;
    .title {
      padding-bottom: 10px;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #e1e1e2;
      a {
        cursor: pointer;
      }
    }
    .newSongList {
      width: 100%;
      height: 390px;
      margin: 15px auto;
      border: 1px solid #ededed;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      box-sizing: border-box;
      .li {
        width: 50%;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        padding: 10px;
        border-right: 1px solid #ededed;
        box-sizing: border-box;
        .index {
          display: flex;
          align-items: center;
          color: #958895;
        }
        .img{
          position: relative;
          img {
            width: 50px;
            height: 50px;
            border: 1px solid #ededed;
            margin: 0 15px;
          }
          i {
            position: absolute;
            top: 50%;
            left: 50%;
            font-size: 25px;
            color: #fff;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 50%;
            transform: translate(-50%, -50%);
          }
          i:hover {
            background: rgba(0, 0, 0, 0.5);
          }
        }
        .name {
          display: flex;
          flex-direction: column;
          text-align: left;
          justify-content: center;
          width: 80%;
          padding: 5px 0;
          span {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          span:last-child {
            color: #958895;
            font-size: 14px;
          }
        }
      }
      .li:nth-child(2n) {
        background-color: #f5f5f7;
      }
      .li:hover, .li:hover span:last-child {
        color: #333384;
        background-color: #ebeced;
      }
    }
  }
</style>
